<template><!--课程公告-->
    <div style="height: 100%">
        <navbar :title="isCourse == 1 ? $t('cos_message') :  $t('exam_message')"></navbar>
        <div class="content-noBottom" style="overflow: auto">
            <van-pull-refresh v-model="isRefresh" @refresh="onPulldownTop" loading-text="loading" pulling-text="" loosing-text="" style="height: 100%;">
                <van-list
                    v-model="isLoading"
                    :finished="finished"
                    :finished-text="(finished&&totalRecord>0) ? $t('no_more') : ''"
                    loding-text="loading"
                    @load="getMessageList"
                    style="padding-bottom: 56px;">
                    <template v-if="list.length > 0">
                        <div class="white-bg" style="padding: 13px 15px;" v-show="list.length > 0">{{ list.length > 1 ? $t("announce_num_2", {'value': totalRecord}) : $t("announce_num", {'value': totalRecord}) }}</div><!--条公告信息-->
                        <div @click="select(index, item.msgId)" v-for="(item, index) in list" class="announce-content white-bg" :key="index">
                            <div class="announce-content-img">
                            </div>
                            <div class="announce-content-body">
                                <div class="title">{{item.msgTitle}}</div>
                                <div>{{ item.msgBeginTime}}</div>
                            </div>
                        </div>
                    </template>
                    <div v-if="!isLoading && totalRecord === 0" style="height:100%;">
                        <div class="box-table" style="width:100%;height:100%;">
                            <div class="box-table-cell" style="text-align: center;">
                                <div class="no-data">
                                    <img src="../../../static/images/no-data.png" alt=""/>
                                    <p class="color999">{{ $t("no_data") }}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </van-list>
            </van-pull-refresh>
        </div>
        <!--tips-->
        <!--公告详情-->
        <div v-if="messageDetail" class="messageDetail">
            <navbar :title="$t('announce_detail')"></navbar>
            <div class="content-noBottom" style="background: #ffffff;overflow: auto">
                <div v-if="detail">
                    <div class="detail-title">
                        {{detail.msgTitle}}
                    </div>
                    <div class="detail-time">
                        <span>{{detail.msgBeginDate | substringTime}}</span>
                    </div>
                    <div style="padding: 40px 15px;">
                        <span class="html-box" v-html="detail.msgBody"></span>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
/*eslint-disable no-useless-escape*/
import {Dialog} from 'vant';
let that;
export default {
    name: 'DetailMessage',
    components: {
        'van-dialog': Dialog.Component
    },
    props: {
        appStatus: {
            type: String,
            default: null
        }
    },
    data() {
        return {
            isLoading: true,
            list: [],
            messageDetail: false,
            detail: {},
            totalRecord: 0,
            init: true, //首次不出现，“无数据”和“没有更多”提示
            reqParams: {
                itmId: this.$route.params.id,
                pageNo: 1,
                pageSize: 10
            },
            isCourse: this.$route.params.isCourse,
            finished: false,
            isRefresh: false
        };
    },
    methods: {
        getMessageList(option) {
            this.$axios({
                method: 'GET',
                url: `/app/api/trainee/course-message/list`,
                params: this.reqParams
            }).then(res => {
                if (res.data.results && res.data.results.length !== 0) {
                    if (option && option === 'refresh') {
                        this.list = res.data.results;
                    } else {
                        this.list = this.list.concat(res.data.results);
                    }
                }
                this.totalRecord = res.data.totalRecord;
                this.isLoading = false;
                this.reqParams.pageNo++;
                if (this.list.length >= this.totalRecord) {
                    this.finished = true;
                }
            });
        },
        select(index, msgId) {
            if (this.appStatus !== 'Admitted' && this.$route.params.appStatus !== 'Admitted') {
                Dialog.alert({
                    width: '180px',
                    confirmButtonText: this.$t('mall_10'),
                    confirmButtonColor: '#00aeef',
                    message: this.isCourse === '1' ? this.$t('join_in_course') : this.$t('join_in_exam')
                });
                return false;
            }
            this.messageDetail = true;
            this.$axios({
                method: 'GET',
                // url: `/app/api/trainee/course-message/${msgId}`,
                url: `/app/api/trainee/course-message/getCourseMessageIsRead/${msgId}`,
                params: {
                    msgId: msgId
                }
            }).then(res => {
                this.detail = res.data;
            });
        },
        /*下拉刷新*/
        onPulldownTop() {
            this.isRefresh = true;
            setTimeout(() => {
                this.finished = false;
                this.reqParams.pageNo = 1;
                this.getMessageList('refresh');
                this.isRefresh = false;
            }, 900);
        }
    },
    beforeCreate() {
        that = this;
    },
    mounted() {
        this.getMessageList('refresh');
    },
    filters: {
        htmlFilter(value) {
            let imgs = value.replace(/<img[^>]*src[=\"\'\s]+[^\.]*\/([^\.]+)\.[^\"\']+[\"\']?[^>]*>/gi, '[' + that.$t('IMAGE') + ']');
            let htmls = imgs.replace(/<("[^"]*"|'[^']*'|[^'">])*>/g, '');
            return htmls;
        }
    }
};
</script>

<style scoped lang="less">
    .detail-title{
        font-size: 20px;
        font-weight: bold;
        padding: 20px 15px;
    }
    .detail-time{
        color: #999999;
        padding: 0 15px;
        overflow: hidden;
        line-height: 15px;
    }
    .messageDetail{
        position: fixed;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 990;
    }
    /deep/.html-box{
        img{
            width: 100%;
            height: auto;
        }
    }
</style>
